<template>
    <div class="quickInsert">
        <div class="quickInsert-box" v-if="format">
            <div class="quickInsert-title" @click="format">
                <span style="cursor: pointer;">格式化参数</span>
            </div>
        </div>
        <div class="quickInsert-box" v-if="formatFromUrl">
            <div class="quickInsert-title" @click="formatFromUrl">
                <span style="cursor: pointer;">从URL中取获取参数</span>
            </div>
        </div>
        <div class="quickInsert-box" v-if="!mini">
            <div class="quickInsert-title" style="cursor:pointer;" @click="showCustomKeyEditor('modal')">
                <span>数据模型</span>
                <i class="el-icon-setting"></i>
            </div>
        </div>
        <!-- <div class="quickInsert-box" v-if="unQuick">
            <div class="quickInsert-title">
                <span>快捷插入</span>
                <i class="el-icon-setting"></i>
            </div>
        </div>
        <div class="quickInsert-box" v-if="!mini">
            <div class="quickInsert-title">
                <span>快捷插入</span>
                <i class="el-icon-setting"></i>
            </div>
        </div> -->
        <div class="quickInsert-box" v-if="!mini">
            <div class="quickInsert-title">
                <el-popover placement="left" title="Key值" trigger="hover">
                    <div class="quickInsert-content">
                        <div class="listItem" v-for="(item,index) in keyArray" v-if="item.key" :key="index">
                            <el-link type="primary" @click="quickInsert(item.key,'key')">{{item.key}}</el-link>
                        </div>
                    </div>
                    <div class="quickInsert-empty" v-if="!keyArray.length">暂无数据</div>
                    <span class="quickInsert-name" slot="reference">Key值</span>
                </el-popover>
                <i class="el-icon-setting" @click="showCustomKeyEditor('key')"></i>
            </div>
        </div>
        <div class="quickInsert-box" v-if="mini">
            <div class="quickInsert-title">
                <el-popover placement="left" title="预处理参数" trigger="hover">
                    <div class="quickInsert-content">
                        <div class="listItem" v-for="(item,index) in options" :key="index">
                            <el-link type="primary" @click="quickInsert(item.str, 'value')">{{item.name}}</el-link>
                        </div>
                    </div>
                    <span class="quickInsert-name" slot="reference">预处理参数</span>
                </el-popover>
                <i class="el-icon-setting" @click="showCustomKeyEditor('key')"></i>
            </div>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <el-popover placement="left" title="全局方法" trigger="hover">
                    <div class="quickInsert-content">
                        <div class="listItem">
                            <el-link type="primary" @click="quickInsert('getCache(\'key\')', 'function')">
                                获取全局缓存
                            </el-link>
                        </div>
                        <div class="listItem">
                            <el-link type="primary" @click="quickInsert('setCache(\'key\', \'value\')', 'function')">
                                存储全局缓存
                            </el-link>
                        </div>
                        <div class="listItem" v-for="(item,index) in funArray" :key="index">
                            <el-link type="primary" @click="quickInsert(item.key, 'function')">{{item.key}}</el-link>
                        </div>
                    </div>
                    <div class="quickInsert-empty" v-if="!funArray.length">暂无数据</div>
                    <div class="quickInsert-name" slot="reference">全局方法</div>
                </el-popover>
                <i class="el-icon-setting" @click="showCustomKeyEditor('fun')"></i>
            </div>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <el-popover placement="left" title="全局缓存" trigger="hover">
                    <div class="quickInsert-content">
                        <div class="listItem" v-for="(item,index) in cacheArray" :key="index">
                            <el-link type="primary" @click="quickInsert(item.value,'cache')">
                                {{item.name+ ' : ' + item.key}}</el-link>
                        </div>
                    </div>
                    <div class="quickInsert-name" slot="reference">全局缓存</div>
                </el-popover>
                <i class="el-icon-setting" @click="showCustomKeyEditor('cache')"></i>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        props: ['editor', 'format', 'formatFromUrl', 'mini', 'unQuick'],
        data() {
            return {
                options: [{
                    str: 'res.type;',
                    name: '请求类型',
                }, {
                    str: 'res.ip;',
                    name: 'ip地址',
                }, {
                    str: 'res.url;',
                    name: 'URL',
                }, {
                    str: 'res.header[""];',
                    name: '头部',
                }, {
                    str: 'res.query[""];',
                    name: 'query参数',
                }, {
                    str: 'res.body[""];',
                    name: '请求参数',
                }, {
                    str: 'res.rest[""];',
                    name: 'url截取参数',
                }],
                CustomModalState: false,
                CustomCacheState: false,
                CustomFunState: false,
                CustomKeyState: false,
                quickInsertStatus: false,
            }
        },
        computed: {
            ...mapState("cache", {
                cacheArray: state => state.cacheArray,
            }),
            ...mapState("customKey", {
                keyArray: state => state.keyArray,
            }),
            ...mapState("fun", {
                funArray: state => state.funArray,
            }),
        },
        methods: {
            showCustomKeyEditor(type) {
                this.$store.dispatch('customKey/showCustomDrawer', {
                    activeObj: this.editor,
                    type: type
                });
            },
            quickInsert(str, type) {
                var selectTest = this.editor.getSelections();
                if (type == 'key') {
                    var text = this.editor.getValue();
                    if (!text) {
                        var _str = `    '${str}' : '',`;
                        this.editor.replaceSelection(`{\n${_str}\n}`);
                        this.editor.setCursor(1, _str.length - 2);
                    } else if (selectTest[0] == text) {
                        var _str = `    '${str}' : '',`;
                        this.editor.replaceSelection(`{\n${_str}\n}`);
                        this.editor.setCursor(1, _str.length - 2);
                    } else if (selectTest[0]) {
                        var _str = `    '${str}' : ''`;
                        this.editor.replaceSelection(_str);
                    } else {
                        var position = this.editor.getCursor();
                        var _str = `    '${str}' : '',`;
                        var oldLine = this.editor.getLine(position.line);
                        this.editor.setCursor(position.line, position.ch + oldLine.length);
                        this.editor.replaceSelection('\n' + _str);
                        this.editor.setCursor(position.line + 1, _str.length - 2);
                    };
                } else if (type == 'function') {
                    if (selectTest[0]) {
                        this.editor.replaceSelection(str);
                    } else {
                        var position = this.editor.getCursor();
                        this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                        var __str = this.editor.getSelection();
                        if (__str == '\'\'' || __str == '\"\"') {
                            this.editor.replaceSelection(str);
                        } else {
                            this.editor.setCursor(position);
                            this.editor.replaceSelection(str);
                        }
                    };
                } else 
                // if (type == "cache") {
                //     var str = '\'' + str + '\'';
                //     if (selectTest[0]) {
                //         this.editor.replaceSelection(str);
                //     } else {
                //         var position = this.editor.getCursor();
                //         this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                //         var __str = this.editor.getSelection();
                //         if (__str == '\'\'' || __str == '\"\"') {
                //             this.editor.replaceSelection(str);
                //         } else {
                //             this.editor.setCursor(position);
                //             this.editor.replaceSelection(str);
                //         }
                //     }
                // } else 
                {
                    this.editor.replaceSelection(str);
                };
                this.editor.focus();
            },
        },
    }

</script>
<style>
    .quickInsert {
        padding: 0 10px;
        position: absolute;
        width: 180px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        overflow-y: auto;
        line-height: 20px;
    }

    .quickInsert .listItem {
        padding: 0 0 0 15px;
    }

    .quickInsert-title {
        font-size: 12px;
        padding: 0 10px;
        line-height: 35px;
        color: #666;
    }

    .quickInsert-content {
        padding: 5px 0;
        border-top: 1px solid #ccc;
    }

    .quickInsert-box {
        height: 35px;
        border-bottom: 1px solid #ccc;
    }

    .quickInsert-name {
        width: 120px;
        float: left;
    }


    .quickInsert-title .el-icon-setting {
        cursor: pointer;
        color: #999;
        float: right;
        line-height: 35px;
    }

    .quickInsert-title .el-icon-setting:hover {
        color: #000;

    }
</style>